@import url('../../style.less');
//页面背景色：灰色
.page {
	background-color: #eeeef4;
}

//强制用我的颜色!important
.yellow {
	background-color: #f0b52f !important;
}
.red {
	background-color: #f0532f !important;
}
.green {
	background-color: #52a929 !important;
}

//第一部分的
.summary-container {
	//该组合属性可以让父级内部的的空间按照设定比例分配给子级元素
	//元素排列为一行 (flex-direction 属性的初始值是 row)。
	//flex布局：能够水平排列
	display: flex;
	//justify-content属性决定了子项的对齐和分布方式。
	//space-between表现为两端对齐，意思是多余的空白间距只在元素中间区域分配。
	justify-content: space-between;
	background-color: #fff;
	//上下左右内填充
	padding: 35rpx;
	//下外填充，距离下面间隔
	margin-bottom: 20rpx;
	.user-info {
		display: flex;
		//头像样式
		.photo {
			width: 100rpx;
			height: 100rpx;
		}
		.info {
			display: flex;
			//flex-direction用来控制子项整体布局方向，是从左往右还是从右往左排列，是从上往下还是从下往上排列。
			//和CSS的direction属性相比就是多了个flex。
			//显示为列。即要垂直排列，这样就一个上一个下
			flex-direction: column;
			//around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
			justify-content: space-around;
			//左外部填充，左外间隔
			margin-left: 25rpx;
			//display: block;，水平独占一行
			.username {
				display: block;
				font-size: 34rpx;
				font-weight: bold;
				color: @font-color;
			}
			.dept {
				display: block;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
	.date {
		font-size: 38rpx;
		color: @background-color;
	}
}

//第二部分的
.result-container {
	display: flex;
	background-color: #fff;
	//向内填充，布局不要贴边
	padding: 35rpx;
	//底部外填充，距离下一部分
	margin-bottom: 20rpx;
	//第二部分的左边
	.left {
		//父布局.left是相对定位，子布局.line是绝对定位
		//flex布局，要求方向垂直
		//justify-content属性决定了子项的对齐和分布方式。
		//space-between表现为两端对齐，意思是多余的空白间距只在元素中间区域分配。
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 330rpx;
		//相对父布局，外填充30rpx，布局不要贴边
		margin-right: 30rpx;
		.icon-timer {
			width: 40rpx;
			height: 40rpx;
			//第一个图片，顶部外填充5rpx，不要贴边
			&:first-child {
				margin-top: 5rpx;
			}
		}
		.line {
			//父布局.left是相对定位，子布局.line是绝对定位
			//flex布局，要求方向垂直
			position: absolute;
			height: 225rpx;
			width: 0;
			border-left: solid #e5e5e5 2rpx;
			left: 20rpx;
			top: 55rpx;
		}
	}
	////第二部分的右边
	.right {
		.row {
			//flex布局，能够水平排列
			display: flex;
			//每一部分都要相对下一部分间隔25rpx
			margin-bottom: 25rpx;
			.start,
			.end {
				font-style: 32rpx;
				color: @background-color;
			}
			.checkin-time {
				font-size: 38rpx;
				font-weight: bold;
				color: @font-color;
				display: block;
			}
			//迟到、正常、中低高风险css
			.checkin-result {
				display: block;
				background-color: #fff;
				font-size: 26rpx;
				height: 42rpx;
				line-height: 42rpx;
				//上下不收缩，左右收缩15rpx，就是字体上下不变，左右往中间靠
				padding: 0 15rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				color: #fff;
			}
			.other {
				margin-top: 7rpx;
				margin-left: 10rpx;
			}
			.icon-small {
				width: 38rpx;
				height: 38rpx;
				margin-right: 10rpx;
				margin-top: 7rpx;
			}
			.desc {
				color: #999;
				font-style: 32rpx;
			}
		}
	}
}

//第三部分
.checkin-report {
	background-color: #fff;
	padding: 35rpx;
	//奖杯图片
	.big-icon {
		//设置图片居中对齐，要有width、display是block、左右对齐
		width: 250rpx;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20rpx;
	}
	//签到时间
	.report-title {
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
		.days {
			font-size: 60rpx;
			color: @font-color;
		}
		.unit {
			margin-left: 10rpx;
			margin-top: 33rpx;
		}
	}
	//累计签到
	.sub-title {
		font-size: 34rpx;
		color: @font-color;
		text-align: center;
		margin-top: 10rpx;
		position: relative;
		text {
			background-color: #fff;
			z-index: 9999;
			position: relative;
			padding: 0 30rpx;
		}
		//横线
		.line {
			height: 0;
			width: 100%;
			border-bottom: solid #e5e5e5 2rpx;
			position: absolute;
			top: 25rpx;
		}
	}
	//v-for="one in weekCheckin" :key="one"
	//第三个view
	.calendar-container {
		//水平排列布局、两端对齐、向外填充30rpx
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		.calendar {
			//文字都居中、不拉神，不压缩
			text-align: center;
			flex-grow: 0;
			flex-shrink: 0;
			.calendar-icon {
				width: 70rpx;
				display: block;
				margin-bottom: 5rpx;
			}
			//周几
			.day {
				font-size: 32rpx;
				color: @font-color;
				display: block;
			}
			//正常、迟到、缺勤css
			.result {
				display: block;
				font-size: 26rpx;
				background-color: #555;
				color: #fff;
				height: 42rpx;
				line-height: 42rpx;
				//向内填充  上下0 左右5rpx，左右压缩，字体往中间挤
				padding: 0 5rpx;
				border-radius: 8rpx;
				margin-top: 10rpx;
			}
		}
	}
}
